<template>
	<!-- 选择目标路径 -->
	<n-modal
		title="选择目标路径"
    v-model:show="modelVisible"
    preset="dialog"
		:close-on-click-modal="false"
		width="580px"
    :on-after-enter="initFileFolderTree"
    @close="handleDialogClose"
    positive-text="确认"
    negative-text="取消"
    @positive-click="handleDialogSure"
    @negative-click="handleDialogClose"
	>
		<n-form :model="form" :rules="formRules" ref="copyFormRef"
			label-width="100px"
			label-position="top"
		>
			<n-form-item label="目标路径" path="filePath">
				<n-input
					v-model:value ="form.filePath"
					placeholder="目标路径"
          readonly="true"
				></n-input>
      </n-form-item>
        <n-spin :show="loading">
          <n-tree
              block-line
              :data="fileFolderTree"
              :default-checked-keys="defaultExpandedKeys"
              key-field="id"
              label-field="label"
              :on-update:selected-keys="handleNodeClick"
              selectable
          />
        </n-spin>
		</n-form>
	</n-modal>
</template>

<script lang="ts" setup>
import {fileController} from '@/api/file/fileController'
import {useMessage} from 'naive-ui'
import {ref} from "vue";
//@ts-ignore
import Bus from '@/components/file/box/GlobalUploader/utils/bus.js'

const message = useMessage()
const copyFormRef = ref(null)
const modelVisible = ref(false)
const sureBtnLoading = ref(false)
const fileInfo = ref()

const loading = ref(false)
/**文件树**/
const fileFolderTree = ref([])
/**当前展开的目录**/
const defaultExpandedKeys = ref([])

const form = ref({
  filePath: ''
})

/**
 * 校验规则，对文件名进行校验
 */
const formRules = {
  filePath: [
    { required: true, message: '请输入目标路径', trigger: 'blur' }
  ]
}


const handleCopyFileShow = (fileInfo_:object) => {
  form.value.filePath = ''
  fileFolderTree.value = []

  fileInfo.value = fileInfo_
  modelVisible.value = true
}


defineExpose({
  handleCopyFileShow
})


/**
 * 取消按钮点击事件 & 对话框关闭的回调
 * @description 关闭对话框，重置表单
 */
const handleDialogClose= () => {
  modelVisible.value = false
}


/**
 * 确定按钮点击事件
 * @description 校验表单，校验通过后调用新建文件夹接口
 */
const handleDialogSure = () => {
  sureBtnLoading.value = true
  console.log(fileInfo.value)
  copyFormRef.value?.validate((errors) => {
    if (!errors) {
      fileController.copyFile({
          filePath: form.value.filePath,
          userFileIds: fileInfo.value.userFileId,
        }).then((res) => {
          sureBtnLoading.value = false
          if (res.code === 200) {
            message.success('复制成功')
            form.value.filePath = '';
            Bus.emit('refreshFileList')
            modelVisible.value = false
            return true
          } else {
            message.error(res.data)
            return false
          }
        }).catch(() => {
          sureBtnLoading.value = false
        })
    } else {
      sureBtnLoading.value = false
      return false
    }
  })
}



/**
 * 目录树节点点击回调函数
 * @description 将当前节点中的文件夹路径传递给父组件
 *
 */
const handleNodeClick = (keys:string,options:Array<any>) => {
  form.value.filePath = options[0].filePath
}


/***
 * 初始化文件目录
 * @param id
 */
const initFileFolderTree = (id:any)=>{
  loading.value = true
  fileController.getFoldTree().then((res)=>{
    loading.value = false
    if(res.code === 200){
      fileFolderTree.value.push(res.data)
      console.log(fileFolderTree.value)
    }else {
      message.error(res.msg)
    }

  })
}
</script>
